import React from 'react';

import { Layout, Menu } from 'antd';

import { useAppSelector } from '@store/hooks';
import { getOption } from '@store/reducers/headerSlice';

import { headTitle } from './index.less';

const { SubMenu } = Menu;
const { Header } = Layout;

function Head(props: any) {
    // const title = 'React17 + react-router-dom + @reduxjs/toolkit + axios + antd4 + dayjs + echarts5 + less + scss + i18next';
    const title = '';
    let spans = title.split('').map((text, i) => {
        return (
            <span key={i} style={{ animationDelay: `${-20 + i * 0.1}s` }}>
                {text}
            </span>
        );
    });

    const option = useAppSelector(getOption);
    let { hidden } = option;

    if (hidden) {
        return <div style={{ width: '0', height: 0, display: 'none' }}></div>;
    }
    return (
        <Header className="header">
            <div className="logo" />
            {/* <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
                <Menu.Item key="1">nav 1</Menu.Item>
                <Menu.Item key="2">nav 2</Menu.Item>
                <Menu.Item key="3">nav 3</Menu.Item>
            </Menu> */}
            <div className={headTitle}>{spans}</div>
        </Header>
    );
}

export default Head;
